const isProduction = process.env.NODE_ENV === 'production'

const cdnModules = ['vue', 'vue-router', 'vuex', 'axios', 'element-ui']
const version = Object.assign(
  {},
  ...cdnModules.map(moduleName => ({
    [moduleName]: require(`${moduleName}/package.json`).version
  }))
)

const cdn = {
  css: [
    `https://unpkg.com/element-ui@${
      version['element-ui']
    }/lib/theme-chalk/index.css`
  ],
  js: [
    `https://unpkg.com/vue@${version['vue']}/dist/vue.min.js`,
    `https://unpkg.com/vue-router@${
      version['vue-router']
    }/dist/vue-router.min.js`,
    `https://unpkg.com/vuex@${version['vuex']}/dist/vuex.min.js`,
    `https://unpkg.com/axios@${version['axios']}/dist/axios.min.js`,
    `https://unpkg.com/element-ui@${version['element-ui']}/lib/index.js`
  ]
}

module.exports = {
  publicPath: process.env.VUE_APP_PATH,
  outputDir: process.env.VUE_APP_DIR,
  assetsDir: 'static',
  productionSourceMap: false,

  configureWebpack: config => {
    if (isProduction) {
      config.externals = {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        vuex: 'Vuex',
        axios: 'axios',
        'element-ui': 'ELEMENT'
      }
    }
  },

  chainWebpack: config => {
    if (isProduction) {
      config.plugin('html').tap(args => {
        args[0].cdn = cdn
        return args
      })
    }
  },

  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        require('path').resolve(__dirname, 'src/styles/variables.scss')
      ]
    }
  }
}
